<template>
	<div id="recommendmes" class="recommendmes">
        <com-head>专家推荐</com-head>
        <div class="expertMain">
            <div class="mainTitle">
                <!-- <img src="../assets/images/topHong.png" alt=""> --> 
                <p class="titleP">专家近10场推荐</p>
            </div>

        <div class="box">
    			<div class="left">
    				<img :src="img" alt="" />
    				<div class="qiuyuan">{{zhiye}}</div>
    			</div>
    			<div class="right" >
            <!-- <button class="guanzhu" @click.stop="guanZhu()" :disabled="status==1">{{guanzhu[status]}}</button> -->
    				<p>{{name}}</p>
    				<p>{{detail}}</p>
    			</div>
    	   </div>
            <div class="detailsMain">
                <ul>
                    <li class="detailsLi" v-for="(item,index) in list" :class="{red:index == changeRed}" @click="reds(index)"   :key="index">
                        {{item}}
                    </li>
                </ul>

                <div class="recomdetail">
                  <!-- 在售推荐 -->
                  <div class="details"  v-if="detailshow==0">
                    <ul>
                        <li class="details1Li box2" v-for="(item,index) in tuijian" :key="index" @click="needpay(item.id,item.info_price)">
                            <div class="detailsTitle">
                                <div class="titleP" style="height:100%;">
                                   <p class="titleIndex" v-html="index+1"></p>
                                   <p class="titleConent">{{item.title}}</p>
                                   <p class="verdict">{{item.info_price}}<span v-if="item.info_price!=='已购买'">元</span></p>
                                   <p class="time">{{item.add_time}}</p>
                                   <p class="verdict2">{{probability}}</p>
                               </div>
                            </div>
                        </li>
                    </ul>
                  </div>
                  <!-- 历史战绩 -->
                  <div class="details" v-else-if="detailshow==1">
                    <ul>
                        <li class="details1Li" v-for="(item,index) in details1List" @click="zhanjiDetail(item.id)" :key="index">
                            <div class="detailsTitle">
                                <div class="titleP">
                                   <p class="titleIndex" v-html="index+1"></p>
                                   <p class="titleConent">{{item.title}}</p>
                                   <p class="verdict">{{verdictType[item.status]}}</p>
                                   <p class="time">{{item.add_time}}</p>
                               </div>
                               <div class="titleP2">
                                   <p>{{item.name}}</p>
                                   <div class="address">
                                    <span>{{item.main_team}}<span class="zhu">(主)</span></span>
                                    VS
                                    <span>{{item.team}}</span>
                                   </div>
                               </div>
                            </div>
                        </li>
                    </ul>
                  </div>
                  <!-- 专家介绍 -->
                  <div class="details box3"  v-else-if="detailshow==2">{{detail}}</div>
                  <!-- 专家稿件 -->
                  <div class="details box4" v-show="detailshow==3">
                     <div class="titleP" v-for="(item,index) in gaojian" @click="gaojianxq(item.id)"  :key="index">
                         <div class="titleConent">{{item.title}}</div>
                         <div class="time">{{item.add_time}}</div>
                    </div>
                  </div>
                </div> 
                
            </div>
        </div>
        <com-foot :select="5"></com-foot>
	</div>
</template>

<script>
export default {
  name: "recommendmes",
  data() {
    return {
      id: this.$route.query.id,
      zhiye: '球员',
			img: '',
			name: '',
			detail: '',
      date: '',
      probability:'',
      changeRed:0,
      detailshow:0,
      status:'',
      verdictType: { '1': '中','2': '不中'},
      guanzhu: { '1': '已关注','0': '关注'},
      list: ["在售推荐", "历史战绩", "专家介绍", "专家稿件"],
      tuijian: [],
      details1List: [],
      gaojian: [],
      expertid: ''
    };
  },
  created() {
    this.detailTop();//上边
    this.detailDown();//下边
  },
  methods: {
    guanZhu(){
      this.axios.post('Ball/expert_focus',{id: this.id})
    .then((response) => {
      if(response.data=="123"){
        this.$bus.$emit('toast', '请先登录');
        this.$router.push('login');
      }else{
       this.status=response.data.status; 
      }
    })
    },
    reds:function(index){
        this.changeRed = index;
        this.detailshow = index;
      if(index==0){
      // 在售推荐
      this.detailDown();
      }else if(index==1){
      // 历史战绩
      this.axios.post('Ball/expert_history',{id: this.id})
      .then((response) => {
      if (response.data=='1') {
        this.$bus.$emit('toast', '暂无数据');
      }else {
      this.details1List=response.data;
      }
      })
      // 专家稿件
      }else if(index==3){
      this.axios.post('Ball/expert_manuscript',{id: this.id})
      .then((response) => {
      if (response.data=='1') {
        this.$bus.$emit('toast', '暂无数据');
      }else {
      this.gaojian=response.data;
      }
      })
      }
      },
    detailTop(){
    this.axios.post('Ball/index_index',{id: this.id})
    .then((response) => {
      this.zhiye = response.data.football.position,
      this.img = response.data.football.expert_img,
      this.name = response.data.football.expert_name,
      this.detail = response.data.football.expert,
      this.probability = response.data.football.probability,
      this.status = response.data.zhuangtai,
      this.expertid = response.data.football.expert_id
    }).catch(function(error) {
        console.log(error);
    });
  },
  // 在售推荐
  detailDown(){
    this.axios.post('Ball/expertdetail',{id: this.id})
    .then((response) => {
      if (response.data=='1') {
      this.$bus.$emit('toast', '暂无数据');
      }else {
      console.log(response);
      this.tuijian=response.data;
      }
    }).catch(function(error) {
        console.log(error);
    }); 
  },
  needpay(id,money) {
      // console.log(money==='已购买');
    if (money == "已购买"||money == "0"){
    this.$router.push({name:'expertrecommend',query:{id:id,expertid:this.expertid,status: 1}});
    }else{
      this.$bus.$emit('comAlert', {
          title: '支付确认',
          info: "你需要支付"+ money+"元",
          button: [
            {
              text: '确认',
              callback: () => {
                this.axios.post('Ball/zhifu', {
                  money: money,
                  id: id
                })
                  .then(({data}) => {
                    if (data.status === 1) {
                      this.$bus.$emit('toast', '购买成功');
                      this.$router.push({name:'expertrecommend',query:{id:id,expertid:this.expertid,status: 1}});
                    } else if (data.status === 2) {
                      this.$bus.$emit('toast', '积分不足，请充值');
                      this.$router.push('userCenter');
                    }
                  })
                  // .catch(function (error) {
                  //   console.log(error);
                  // });
              }
            },
            {
              text: '取消',
              callback: () => {
              }
            }
          ]
        });
    }
  },
  //战绩详情 
  zhanjiDetail(id1){
    this.$router.push({name:'expertrecommend',query:{id: id1,expertid:this.expertid,status: 1}});
    console.log(this.expertid);

  },
  gaojianxq (id){
    this.$router.push({name:'detail',query:{id: id,status:0}});
  }
  }
};
</script>

<style lang="scss">
#recommendmes {
  .clearfix:after{
  content: '';
  display: block;
  clear: both;
}
  background-color: #ffc29b;
  padding-top: 94px;
  .mainTitle {
    width: 432px;
    height: 60px;
    text-align: center;
    color: #fff;
    line-height: 60px;
    margin-left: 20%;
    background: url(../assets/images/topHong.png);
    background-position: center; 
    background-size: contain;
    background-repeat: no-repeat;
  }
  .box {
			width:662px;
			height:226px;
			margin: 29px auto;
			background:rgba(255,255,255,1);
			border-radius:15px;
			display: flex;
			justify-content: center;
			position:relative;
			&::before{
				content: '';
				width: 30px;
				height: 30px;
				border-radius: 15px;
				background: #ffc29b;
				position: absolute;
				top: 50px;
				left: -15px;
						
				}
			&::after{
				content: '';
				width: 30px;
				height: 30px;
				border-radius: 15px;
				background: #ffc29b;
				position: absolute;
				top: 50px;
				right: -15px;
			}
				.left {
					width:125px;
					height:176px;
					margin: 25px 25px 25px 0;
					box-sizing: border-box;
					border-radius: 5px;
					position: relative;
					img {
						width: 100%;
					}
					.qiuyuan {
						width:55px;
						height:35px;
						-webkit-text-size-adjust:none;
						background-color: #FB690A;
						position: absolute;
						left: 37px;
						bottom: 13px;
						text-align: center;
						line-height: 35px;
						color: rgba(255,255,255,1);
						font-size:12px; 
            -webkit-transform-origin-x: 0;
            -webkit-transform: scale(0.7);
					}
				}
				.right {
					width:415px;
					height:176px;
					line-height:40px;
					box-sizing: border-box;
					padding-top: 30px;
					position: relative;
          .guanzhu {
            width: 90px;
            height: 35px;
            line-height: 35px;
            text-align: center;
            border-radius: 8px;
            box-shadow: 0px 4px 0px #585858;
            font-size: 12px;
            background-color: rgba(169,34,39,1);
            color: white;
            position: absolute;
            top: 20px;
            right: 20px;
          }
					p:nth-of-type(1){
						font-size:26px;
						color: #585858;
						font-weight: 700;
						}
					p:nth-of-type(2){
						font-size:20px;
						color: #807E7E;
						overflow : hidden;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-line-clamp: 3;
						-webkit-box-orient: vertical;
					}
					p:nth-of-type(3) {
						font-size:14px;
						}
					.zhong {
						width:106px;
						height:37px;
						background:rgba(169,34,39,1);
						border-radius:5px;
						color: white;
						font-size: 24px;
						text-align: center;
						position: absolute;
						right: 28px;
						bottom: -5px;
					}
				}		
	}
  .detailsMain {
    margin-top: 35px;
    width: 662px;
    margin: 0 auto;
    ul {
      width: 100%;
      list-style: none;
      height: 80px;
      .detailsLi {
        background-color: #B0B0B0;
        color: #fff;
        font-size:30px;
        line-height: 80px;
        float: left;
        width: 25%;
        border-radius: 5px;
        text-align: center;
      }
      .red{
       background-color: #FE7923;
      }
    }
    .recomdetail {
      width: 100%;
     background:rgba(242,242,242,1);
        .box3 {
          width: 100%;
          height: 100%;
          background-color: #fff;
          padding: 12px;
          font-size: 20px;
          color: #717171;
          text-indent: 2em;
          box-sizing: border-box;
        }
        .box4 {
        width: 100%;
        height: 100%;
        padding: 22px;
        box-sizing: border-box;
        .titleP {
        width: 100%;
        line-height: 80px;
        border-bottom: 1px solid #e0d8d8;
        box-sizing: border-box;
        overflow: hidden;
        .titleConent{
            width: 73%;
						font-size:26px;
            color: #717171;
            float: left;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 1;
            -webkit-box-orient: vertical;
				  }
        .time{
						font-size:26px;
            color: #B0B0B0;
            float: right;
					}
        }
        }
      .details {
      //在售推荐
        .box2{
        width: 100%;
        height: 170px;
        position: relative;
        box-sizing: border-box;
          .verdict2 {
          font-size:14px;
          color: #fff;
          width:60px;
          height:30px;
          position: absolute;
          bottom: -40px;
          left: 40px;
          line-height: 34px;
          text-align: center;
          background-color: #B0B0B0;
          border-radius:5px;
          }
        }
        .details1Li {
          background: #fff;
          padding: 0px 20px 10px 20px;
          margin-bottom: 26px;
          .detailsTitle {
            position: relative;
            .titleP {
              width: 85%;
              // height: 80px;
              padding-top: 20px;
              p:nth-of-type(2){
              padding-left: 50px;
              // height: 50px;
              display: inline-block;
              font-size:26px;
              color:rgba(169,34,39,1);
              line-height:34px;
              overflow: hidden;
              text-overflow: ellipsis;
              display: -webkit-box;
              -webkit-line-clamp: 1;
              -webkit-box-orient: vertical;
              }
              p:nth-of-type(3){
              font-size:14px;
              color: #fff;
              // width:72px;
              height:30px;
              padding: 0 8px;
              position: absolute;
              top: 15px;
              right: 0px;
              line-height: 34px;
              text-align: center;
              background:rgba(169,34,39,1);
              border-radius:5px;
              }
              p:nth-of-type(4){
              font-size:18px;
              padding-left: 42px;
              line-height: 14px;
              color: #999999;
              line-height:50px;
              }
              .titleIndex {
                display: inline-block;
                width: 34px;
                height: 34px;
                font-size: 26px;
                line-height: 34px;
                text-align: center;
                border-radius: 17px;
                background: #A92227;
                position: absolute;
                top: 20px;
                color: #fff;
              }
            }
          }
          .titleP2 {
              width: 100%;
              // height: 90px;
              // padding: 20px;
              box-sizing: border-box;
              p:nth-of-type(1){
              font-size:26px;
              color:rgba(153,153,153,1);
              }
              .address {
              text-align: justify;
              font-size:26px;
              color: #444343;
              line-height: 34px;
              text-align: center;
              overflow: hidden;
              span:nth-of-type(1) {
              float: left;
              .zhu {
                color: rgba(169,34,39,1);
              }
              }
              span:nth-of-type(2) {
               float: right;
              }
              }
          }
        }
      
    }
    }
    
  }
}
</style>
